<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>帽儿山生态服务评估系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../dist/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>

		iframe{
			width: 100%;
            height: 100%;
            
		}
		.layui-body{overflow: visible;}
	
		#menu .layui-nav .layui-nav-item a{
            padding: 0 20px 0 30px;
            line-height: 55px;
            height: 50px;
        }
        .layui-nav{
            background: #2e2e2e;
        }
        
        .layui-layout-admin .layui-side {
            top: 105px;
        }
        .change-icon{
            background: #3c3c3c;
            padding-left: 30px;
            width: 200px;
            height: 50px;
            line-height: 45px;
            color: #fff;
            cursor: pointer;
            position: absolute;
            left: 50px;
            z-index: 9999;
            top: 90px;
        }
        .crile-show{
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius:8px;
            background: #3c3c3c;
            margin-left: 30px;
            margin-top: 25px;
            display: none;
            position: absolute;
            top: 60px;
            left: 20px;
            
        }
       .logo{
            position: absolute;
            top: 15px;
            left: 40px;
        }
        .menuItem-right {
            position: absolute;
            top: 10px;
            right: 5px;
            width: 670px;
        }
      
        .menuItem-right ul li{
            float: left;
            margin-top: 5px;
            margin-right: 10px;
            background: #696969;
            padding: 8px 20px;
            border-radius: 17px;
            color: #fff;
        }
        .menuItem-right ul li:nth-child(4){
            margin-right: 50px;
        }
        .menuItem-right ul li.on{
            background: #07a1a3;
        }
        #menu{
            position: absolute;
            left: 50px;
            z-index: 9999;
            top: 138px;
        }
        .layui-nav-tree{
            width: 230px;
        }
        #menus{
            position: absolute;
            left: 50px;
            z-index: 9999;
            top: 138px;
            width: 230px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-body" style="left: 0; top: 0;">
    <!-- 内容主体区域 -->
    <iframe src="map_shower.html?tag=data&value=value&time=201801&name=hysy_tjsl&name2=hysy&nav=1" frameborder="0"></iframe>
    <!-- logo -->
    <div class="logo"><img src="../../dist/layui/image/logo.png" alt=""></div>
    <div class="menuItem-right">
        <div class="menuItem-right">
            <ul>
                <li>基本概况</li>
                <li class="on">生态评估</li>
                <li>分析预测</li>
                <li>更多</li>
                <li>张三你好</li>
                <li style="cursor: pointer;" onclick="logout()">退出</li>
            </ul>
        </div>
    </div>
    <!-- 导航 -->
    <div class="crile-show">
        <i class="layui-icon layui-icon-spread-left" style="font-size: 20px; color: #fff;"></i>
    </div>
    <div class="change-icon"><i class="layui-icon layui-icon-spread-left"  ></i> 生态价值评估</div>
    <!-- <div id="menu" class="layui-nav layui-nav-tree"  lay-filter="test"></div> -->
    <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menus" lay-shrink="all" >
          <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">涵养水源</a>
            <dl class="layui-nav-child">
              <dd class="layui-this"><a href="javascript:;">调节水量</a></dd>
              <dd><a href="javascript:;">净化水质</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">保育土壤</a>
            <dl class="layui-nav-child">
              <dd><a href="">固土</a></dd>
              <dd><a href="">保肥</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">产品</a></li>
          <li class="layui-nav-item"><a href="">大数据</a></li>
        </ul>

</div>

<script src="../../dist/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    // 导航菜单的间隔像素
    var menuCell = 1;

    layui.use('element', function(){
        var element = layui.element;
        var $ = layui.jquery;
       
        data= [
         	
		    {
		        "name": "涵养水源",
		        "url": "www.sys.com",
		        // "icon": "layui-icon-snowflake",
		        "childMenus": [
                    {
		                "name": "调节水量",
		                "url": "map_shower.html?tag=data&value=value&time=201801&name=hysy_tjsl&name2=hysy&nav=1",
		                // "icon": "layui-icon-snowflake",
		                "childMenus":null
		            },
                    {
		                "name": "净化水质",
		                "url": "map_shower.html?tag=data&value=value&time=201801&name=hysy_jhsz&name2=hysy&nav=0",
		                // "icon": "layui-icon-snowflake",
		                "childMenus":null
		            },
                ]
		    },
		    {
		        "name": "保育土壤",
		        "url": "www.manager.com",
		        // "icon": "layui-icon-snowflake",
		        "childMenus": [
		            {
		                "name": "固土",
		                "url": "map_shower.html?tag=data&value=value&time=null&name=bcs_gt&nav=2",
		                // "icon": "layui-icon-snowflake",
		                "childMenus":null
		            },
                    {
		                "name": "保肥",
		                //"url": "table.html",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": [
		                	{
				                "name": "氮",
				                "url": "map_shower.html?tag=data&value=value&time=null&name=bcst_n&nav=3",
				                // "icon": "layui-icon-snowflake",
				                "childMenus": null
				            },
		                	{
				                "name": "磷",
				                "url": "map_shower.html?tag=data&value=value&time=null&name=bcst_p&nav=4",
				                // "icon": "layui-icon-snowflake",
				                "childMenus": null
				            },
                            {
				                "name": "钾",
				                "url": "map_shower.html?tag=data&value=value&time=null&name=bcst_k&nav=5",
				                // "icon": "layui-icon-snowflake",
				                "childMenus": null
				            }
		                ]
		            }

		        ]
		    },
            {
		        "name": "固碳释氧",
		        "url": "www.sys.com",
		        // "icon": "layui-icon-snowflake",
		        "childMenus": [
		        	{
		                "name": "固碳量",
		                "url": "map_shower.html?tag=data&value=value&time=201803&name=gutan&nav=6",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            },
		            {
		                "name": "释氧量",
		                "url": "map_shower.html?tag=data&value=value&time=201803&name=sy&nav=7",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            }
		        ]
		    },
            {
		        "name": "积累营养物质",
		        "url": "www.sys.com",
		        // "icon": "layui-icon-snowflake",
		        "childMenus": [
		        	{
		                "name": "固氨",
		                "url": "map_shower.html?tag=data&value=value&time=201803&name=yyjl_gdl&nav=8",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            },
		            {
		                "name": "固磷",
		                "url": "map_shower.html?tag=data&value=value&time=201803&name=yyjl_gll&nav=9",
		                // "icon": "layui-icon-snowflake",
                        "childMenus":null
		            },
                    {
		                "name": "固钾",
		                "url": "map_shower.html?tag=data&value=value&time=201803&name=yyjl_gjl&nav=10",
		                // "icon": "layui-icon-snowflake",
                        "childMenus": null
		            }
		        ]
		    },
            {
		        "name": "净化大气环境",
		        "url": "www.sys.com",
		        // "icon": "layui-icon-snowflake",
		        "childMenus": [
		        	{
		                "name": "释放负离子",
		                "url": "map_shower.html?tag=data&value=value&time=null&name=dqjh_flzl&nav=11",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            },
		            {
		                "name": "滞沉",
		                "url": "map_shower.html?tag=data&value=value&time=null&name=dqjh_zc&nav=12",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            },
                    {
		                "name": "二氧化硫",
		                "url": "map_shower.html?tag=data&value=value&time=null&name=dqjh_so2&nav=13",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            },
		            
                    {
		                "name": "氮氧化物",
		                "url": "map_shower.html?tag=data&value=value&time=null&name=dqjh_no&nav=14",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            },
		            {
		                "name": "氟化物",
		                "url": "map_shower.html?tag=data&value=value&time=null&name=dqjh_hf&nav=15",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            },
                    {
		                "name": "降噪",
		                "url": "map_shower.html?tag=data&value=value&time=null&name=dqjh_jzjz&nav=16",
		                // "icon": "layui-icon-snowflake",
		                "childMenus": null
		            }
		        ]
		    },
            {
		        "name": "生物多样性",
		        "url": "map_shower.html?tag=data&value=value&time=null&name=bhswdyx&nav=17",
		        // "icon": "layui-icon-snowflake",
		        "childMenus":null
		    },
		];
       // console.log("data: "+data);
//      data = JSON.parse(data);
        var liStr= "";
        // 遍历生成主菜单
        for( var i = 0; i <data.length; i++){
            //console.log("--> "+JSON.stringify(data[i]));
            // 判断是否存在子菜单
            if(data[i].childMenus!=null&&data[i].childMenus.length>0){
                //console.log("--> "+JSON.stringify(data[i].childMenus));
                liStr+="<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\"><i class='layui-icon "+ data[i].icon +"'></i> "+data[i].name+"</a>\n"+
                            "<dl class=\"layui-nav-child\">\n";
                // 遍历获取子菜单
                for( var k = 0; k <data[i].childMenus.length; k++){
                    liStr+=getChildMenu(data[i].childMenus[k],0);
                }
                liStr+="</dl></li>";
            }else{
                liStr+="<li class=\"layui-nav-item\" ><a class=\"\" href=\"javascript:;\" data-url=\""+data[i].url+"\"><i class='layui-icon "+ data[i].icon +"'></i> "+data[i].name+"</a></li>";
            }
        };
        //console.log(">>>> "+liStr);
        $("#menu").html("<ul class=\"layui-nav layui-nav-tree\"  lay-shrink=\"all\"  lay-filter=\"test\">\n" + liStr+"</ul>");
        
        element.init();
        
        // 页面切换
        $(document).on('click', '#menu a', function(){
        	var thisPage = $(this).attr("data-url");
           
        	if(typeof(thisPage) != "undefined"){
        		if($('.layui-body iframe').attr('src') == thisPage) return;
                // if(thisPage == 'wendang.html'){
                //    $('.layui-header').css('background-color','#f60')
                // }else{
                //     $('.layui-header').css('background-color','#23262E')
                // }
        		$('.layui-body iframe').attr('src', thisPage)
        	}
        });
        //左侧导航显示隐藏
        $(document).on('click', '.change-icon', function(){
            $('#menu').css('display','none')
            $('.change-icon').css('display','none')
            $('.crile-show').css('display','block')
        })
        $(document).on('click', '.crile-show', function(){
            $('#menu').css('display','block')
            $('.change-icon').css('display','block')
            $(this).css('display','none')
        })
        
        
    });
    //退出
    function logout(){
        alert(1)
    }
    // 递归生成子菜单
    function getChildMenu(subMenu,num) {
        //console.log("num: "+num);
        num++;
        var subStr = "";
        if(subMenu.childMenus!=null&&subMenu.childMenus.length>0){
            subStr+="<dd><ul><li class=\"layui-nav-item\" ><a style=\"text-indent: "+num*menuCell+"em\" class=\"\" href=\"javascript:;\"><i class='layui-icon "+ subMenu.icon +"'></i> "+subMenu.name+"</a>" +
                    "<dl class=\"layui-nav-child\">\n";
            for( var j = 0; j <subMenu.childMenus.length; j++){
                subStr+=getChildMenu(subMenu.childMenus[j],num);
            }
            subStr+="</dl></li></ul></dd>";
        }else{
            subStr+="<dd><a style=\"text-indent:"+num*menuCell+"em\" href=\"javascript:;\" data-url=\""+subMenu.url+"\"><i class='layui-icon "+ subMenu.icon +"'></i> "+subMenu.name+"</a></dd>";
        }
        return subStr;
    }

  
</script>



</body>
</html>
